<template>
  <!-- dirItem -->
  <el-row :gutter="24" style="margin-left:0; margin-right: 0;border-bottom: solid 1px #ccc;"
    class=" h-[42px] bg-white f-list" @dblclick="itemClick(props.item)">
    <el-col :span="9" class="text-lg h-full flex flex-row items-center justify-between ">
      <div class="h-full flex items-center justify-between cursor-pointer">
        <div class="felx items-center">
          <el-checkbox v-model="itemChecked" @change="checkChange"></el-checkbox>
          <i class="iconfont relative mx-3 text-2 xl" :class="iconStyle.icon" :style="{ color: iconStyle.color }"></i>
          <span>{{ props.item.name }}</span>
        </div>
        <div class="cursor-pointer flex items-center other-hidden">
          <el-tooltip effect="dark" content="分享" placement="bottom">
            <el-icon size="20px" color="#409EFF" class="mr-3" @click="handleShare(props.item.id)">
              <Share />
            </el-icon>
          </el-tooltip>
          <el-tooltip effect="dark" content="下载" placement="bottom" v-if="props.item.isdir === 0">
            <el-icon size="20px" color="#409EFF" class="mr-3" @click="handleDownload(props.item)">
              <Download />
            </el-icon>
          </el-tooltip>
          <el-dropdown class="pt-2" placement="top-start">
            <div class="pb-1">
              <el-icon size="30px" color="#409EFF">
                <MoreFilled />
              </el-icon>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="handleEidt">重命名</el-dropdown-item>
                <el-dropdown-item @click="handlerDelete(props.item)">删除</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </el-col>
    <el-col :span="6" style="line-height: 60px;">
      <div class="flex h-full w-full justify-center items-center text-lg">-</div>
    </el-col>
    <el-col :span="9" class="h-full" style="line-height: 60px;">
      <div class="flex w-full h-full items-center">
        {{ props.item.created_time }}
      </div>
    </el-col>
  </el-row>
</template>


<script lang="ts" setup>
import { computed, watch, ref } from 'vue'


const props = defineProps({
  item: {
    type: Object,
    default: () => {
      return {}
    }
  },
  index: {
    type: [String, Number],
    default: 0
  }
})

const itemChecked = ref(false)

watch(() => props.item, (nevalue) => {
  itemChecked.value = nevalue.checked
}, {
  deep: true
})

const emit = defineEmits(['not-event'])
const icons: any = {
  dir: {
    icon: 'icon-file-b-2',
    color: '#E6A23C'
  },
  image: {
    icon: 'icon-file-b-6',
    color: 'text-success'
  },
  text: {
    icon: 'icon-file-s-7',
    color: '#67C23A'
  },
  video: {
    icon: 'icon-file-b-9',
    color: '#409EFF'
  },
  none: {
    icon: 'icon-file-b-8',
    color: '#606266'
  }
}


const iconStyle = computed(() => {
  return icons[`${props.item.type}`]
})

const handlerDelete = (item: any) => {
  // model delete
  emit('not-event', {
    type: 'delete',
    id: item.id
  })
}

const handleDownload = (item: any) => {
  emit('not-event', {
    type: 'download',
    item
  })
}


const handleShare = (id: number) => {
  emit('not-event', {
    type: "share",
    id: id
  })
}


const checkChange = (e: boolean) => {
  emit('not-event', { type: 'checked', index: props.index, value: e })
}

const handleEidt = () => {
  emit('not-event', {
    type: 'rename',
    index: props.index,
  })
}

const itemClick = (item: any) => {
  emit('not-event', {
    type: 'itemClick',
    data: item
  })
}

</script>

<style lang="scss" scoped>
.f-list:hover {
  background-color: rgba(45, 140, 240, .1);

  .other-hidden {
    display: flex;
  }
}

.f-list .other-hidden {
  display: none;
}
</style>